<script setup>
import {ref, onMounted, watch} from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
    data: {
        type: Object,
        required: true
    }
})

let chart = null
const target = ref()

onMounted(() => {
    chart = echarts.init(target.value);
    renderChart()
})

watch(() => props.data, () => {
    renderChart()
})
const renderChart = () => {
    const yData = props.data.map((item) => ({
        name: item.name,
        value: item.value,
    }));
    /** @type EChartsOption */
    const option = {
        title: {
            text: '嵌套环形图',
            textStyle: {
                color: '#FFFFFF',
                fontSize: 16
            }
        },
        series: [
            {
                type: 'pie',
                radius: ['0%', '5%'],
                data: [
                    {
                        value: 1,
                        itemStyle: {
                            color: '#5e82ed'
                        }
                    }
                ],
                label: {
                    show: false
                },
            },
            {
                type: 'pie',
                radius: ['5%', '10%'],
                data: [
                    {
                        value: 1,
                        itemStyle: {
                            color: '#FFFFFF'
                        }
                    }
                ],
                label: {
                    show: false
                },
            },
            {
                type: 'pie',
                data: yData,
                radius: ['10%', '60%'],
                label: {
                    show: true,
                    lineHeight: 18,
                    formatter: '{b}\n{c}万亩'
                },
                labelLayout: {
                    align: 'center'
                },
                roseType: 'area',
            }
        ]
    };
    chart.setOption(option);
}
</script>

<template>
    <div>
        <div ref="target" class="w-full h-full"></div>
    </div>
</template>

<style scoped></style>
